<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4-1-1-过渡效果</title>
<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">

</style>
</head>
<body>

	<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target=".bs-example-modal-lg" >启动大modal</button>
	
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelladby="myLargeModalLabel" aria-hidden="true" >
		<div class="modal-dialog modal-lg" >
			<div class="modal-content" style="margin-top: 250px;">
				这个是大的modal
					<!-- form-horizontal----水3表单 -->
					<form class="form-horizontal " role='form' >
						<div class="form-group">
							<label class="col-sm-2 control-label">Emain</label>
							<div class="col-sm-9">
								<input type="emain" placeholder="emain" class="form-control">
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-2 control-label">password</label>
							<div class="col-sm-9">
								<input type="password" placeholder="password" class="form-control">
							</div>
						</div>

						<div class="form-group">
							<div class="col-sm-offset-2  col-sm-10">
								<div class="check">
									<label>
										<input type="checkbox">记住密码
									</label>
								</div>
							</div>
						</div>

						<div class="form-group text-center">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="submit" class="btn-lg btn-primary">登录</button>
							</div>
						</div>
					</form>
			</div>
		</div>
	</div>


	<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm" >启动小modal</button>
	
	<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelladby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<h3>这个是小的modal</h3>
			</div>
		</div>
	</div>



<!-- 创建第二个模态框种类 -->
	
	<!-- data-whtever--------获取当前内容输入模态框之中 -->
	<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#motai2" data-whatever="@mdo">Openmodal for @mdo
	</button>

	<div class="modal fade" id="motai2" tabindex="-1" role="dialog" aria-labelladby="motai2" hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button " class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true"> &times;</span>
					</button>
					<h4 class="modal-title" id="motai2"> New Message</h4>
				</div>

				<div class="modal-body">
					<div class="form-group">
						<label for="input-name" class="control-label">Rec</label>
						<input type="text" class="form-control" id=input-name">
					</div>
				</div>
				
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-dismiss="modal">Close
					</button>
					<button type="button" class="btn btn-success" data-dismiss="modal">Send
					</button>
				</div>

			</div>
		</div>
	</div>





<h1>练习</h1>
	
	<button type="button" class="btn btn-lg btn-success" data-toggle="modal" data-target=".muBiaoDian"  aria-hidden="true">触发模态框</button>
	
	<div role="dialog" class="modal fade muBiaoDian" tabindex="-1" aria-hidden="ture" aria-labelladby="myLargeModalLabel"  >
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<h2>div==div==div.content==h2</h2>
			</div>
		</div>
	</div>




<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script type="text/javascript">

	$("#motai2").on('show.bs.modal',function(event){
		var button = $(event.relatedTarget)
		var recipient = button.data("whatever")
		var modal = $(this)
		modal.find(".modal-title").text("New Message to " + recipient)
		modal.find(".modal-body input").val(recipient)
	})


</script>

</body>
</html>